<template>
  <div class="global">

    <div class="head">


      <div class="title">咖啡点单系统</div>
      <el-menu :default-active="$route.path" style="    flex: 1;
    display: flex;
    justify-content: center;" mode="horizontal" router class="el-menu-demo">
        <el-menu-item index="/userhome">首页</el-menu-item>
        <el-menu-item index="/jxcoffee">精选咖啡</el-menu-item>
    
        <el-menu-item index="/gwc">购物车</el-menu-item>
        <el-menu-item index="/dd">订单</el-menu-item>
    
      </el-menu>

      <el-dropdown style="margin-left: 30px;">
        <span class="el-dropdown-link" style="color: #fff;">

          <img v-if="user.icon == null" src="../assets/logo.png"
            style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;" alt=""
            srcset="">
          <img v-else :src="user.icon"
            style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;" alt=""
            srcset="">
          {{ user.nickName }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="personal()">个人信息</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="centerview">
    <router-view></router-view>
    </div>
    <div class="bottomm">
      <div>Copyright © 2010 Arc 京公网安备 11010802045678 互联网ICP备案：京ICP备06029423号-1</div>
      <div>地址: 唐山市路北区铭洋国际 邮编: 100876 技术支持: 010-62283919</div>
      <div>站长统计 | 今日IP[1956] | 今日PV[57416] | 昨日IP[3026] | 昨日PV[89630] | 当前在线[671]</div>
    </div>
  </div>
</template>
<style>
.bottomm div{
color: #fff;
font-size: 14px;
text-align: center;
margin-bottom: 10px;
}
.bottomm {
  width: 100%;
  height: auto;
  padding: 10px;
  
  box-sizing: border-box;
  background: #257EB9;
  position: absolute;
  left: 0;
  bottom: 0px;
}
.centerview{
    width: 70%;
    margin: 0 auto;
padding-bottom: 123px;
box-sizing: border-box;
}
</style>
<script>
import axios from 'axios';

import service from '@/request';

export default {

  data() {
    return {
      svalue: "",
      user: {},
      type: "",
      city: ""
    }
  },
  mounted() {
    this.getinfo()
  },
  methods: {
    srach() {

      this.$router.replace({
        path: "/search",
        query: {
          value: this.svalue
        }
      }

      )

      window.location.reload()


    },
    jftx() {
      this.$router.push({
        path: "/hyjftx"
      })

    },
    logout() {
      window.localStorage.clear()
      this.$router.push({
        path: "/"
      })
    },
    personal() {

      this.$router.push({
        path: "/userPersonal"
      })

    },
    mynew() {
      this.$router.push({
        path: "/mynew"
      })
    },
    myfk() {
      this.$router.push({
        path: "/myfk"
      })
    },
    mywd() {
      this.$router.push({
        path: "/mywd"
      })
    },
    async getinfo() {
      const res = await service.get("/account/info");
      console.log(res)
      this.user = res.data

      console.log()
      window.localStorage.setItem("userinfo", JSON.stringify(this.user))
   
    },
  }


}
</script>
<style scoped>
.head {
  width: 100%;
  padding-right: 30px;
  box-sizing: border-box;
  display: flex;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #eee;
  background: #824e1d;
  align-items: center;
}

.title {
  /* flex: 1; */
  color: #fff;
  cursor: pointer;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
}
</style>
<style>
.el-menu {
  background: transparent !important;
}


.el-submenu__title {
  color: #fff !important;
}

.el-menu-item {
  color: #fff !important;
}

.is-active {
  background: #c2a967 !important;
}

.el-submenu__title:hover {
  background: #c2a967 !important;
}

.el-menu-item:hover {
  background: #c2a967 !important;
}

.global {
  width: 100%;

  background-color: rgb(248, 248, 248);
  height: 100%;
  overflow: auto;
}
</style>